<template>
  <div class="slider">
    <img class="sliderImg" :src="imagePath"  alt="">
    <div class="caption slider-content " style="position: absolute; z-index: 1;">
      <div class="container" style="position: relative; bottom: 30px;">
        <h2 style="color: #6360ff;">{{ albumName }}</h2>
        <h4>{{ albumDescription }}</h4>
      </div>
    </div>
  </div>
  <div class="section services">
    <div class="container">
      <div class="row">
        <div class="col s6" @click="goToTechnology(newArticle.articleId)">
          <i class="fa fa-newspaper-o"></i>
          <h4 style="color: #5d5dea;">最新技文</h4>
          <p>{{ newArticle.description }} </p>
        </div>
        <div class="col s6" @click="gotoSummary(summary.summaryId)">
          <i class="fa fa-pencil-square"></i>
          <h4 style="color: #5d5dea;">个人总结</h4>
          <p>{{ summary.summaryTitle }} </p>
        </div>
      </div>
      <!-- <div class="row mb"> -->
      <!-- <div class="col s6"> -->
      <!-- <i class="fa fa-bar-chart"></i> -->
      <!-- <h5>Marketing</h5> -->
      <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> -->
      <!-- </div> -->
      <!-- <div class="col s6"> -->
      <!-- <i class="fa fa-cogs"></i> -->
      <!-- <h5>Consulting</h5> -->
      <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> -->
      <!-- </div> -->
      <!-- </div> -->
    </div>
  </div>
  <div class="section bg-second">
    <div class="container">
      <div class="section-head">
        <h4>相册集景</h4>
        <div class="underline"></div>
      </div>
      <div class="portfolio">
        <div class="menuStyle">
          <el-menu style="background-color: #f0f4f8;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
            @select="handleSelect">
            <el-menu-item index="1">游记</el-menu-item>
            <el-menu-item index="2">美食</el-menu-item>
            <el-menu-item index="3">其他</el-menu-item>
          </el-menu>
        </div>
        <div class="row">
          <div class="filtr-container">
            <div class="block" v-for="(item, index) in images">
              <el-image :src="item.pictureUrl" fit="fill" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getIndexAlbums, getPhotosByType, getNewTechnology } from '@/api/index.js'
import { getIndexSummary } from '@/api/article.js'
export default {

  data() {
    return {
      blogAlbum: [
        {
          imageList: [{
            pictureId: '',
            pictureUrl: ''
          }
          ],

        }
      ],
      activeIndex: 1,
      images: [],
      newArticle: {},
      summary: {},
      currentIndex: 0,
      imagePath: '',
      albumName: '',
      albumDescription: ''
    }
  },

  mounted() {
    setInterval(() => {
      this.currentIndex++;
      this.changeImage();
    }, 3000);
    this.getAlbumList();
    this.handleSelect(1);
    this.getNewArticle();
    this.getSummary();
  },

  methods: {
    async getAlbumList() {
      getIndexAlbums().then((resp) => {
        if (resp.code == 200) {
          this.blogAlbum = resp.data
          this.changeImage();
        }
      })
    },

    async getNewArticle() {
      getNewTechnology().then((resp) => {
        if (resp.code == 200) {
          this.newArticle = resp.data
        }
      })
    },
    async goToTechnology(articleId) {
      this.$router.push(`/technologyDetail/${articleId}`)
    },
    gotoSummary(summaryId) {
      this.$router.push(`/summary`)
    },
    async getSummary() {
      getIndexSummary().then((resp) => {
        if (resp.code == 200) {
          this.summary = resp.data
        }
      })
    },
    changeImage() {
      
      if (this.currentIndex >= this.blogAlbum.length) {
        this.currentIndex = 0;
      }
      this.imagePath = this.blogAlbum[this.currentIndex].imageList[0].pictureUrl;
      this.albumName = this.blogAlbum[this.currentIndex].albumName;
      this.albumDescription = this.blogAlbum[this.currentIndex].albumDescription;
    },
    handleSelect(key) {
      getPhotosByType(key).then((resp) => {
        if (resp.code == 200) {
          if (resp.data != null) {
            this.images = resp.data.imageList
          } else {
            this.images = [];
          }
        }
      })
    }
  }

}

</script>

<style>
.block {
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  display: inline-block;
  width: 20%;
  /* box-sizing: border-box; */
  vertical-align: top;
  margin: 0 150px 10px;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-menu-item:nth-child(1) {
  margin-left: 50px !important;
}

.menuStyle {
  width: 30%;
  margin: auto;
  background-color: #f0f4f8;
}

.el-image {
  width: 500px;
  height: 300px;
}

.sliderImg{
  width: 100%;
  height: 100%;
  /* animation: myScaleX 3s infinite linear; */
}

@keyframes myScaleX {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


@media screen and (min-width: 220px) and (max-width:600px) {
  .menuStyle {
    width: 100% !important;
    margin: auto;
  }

  .el-image {
    width: 170px;
    height: 110px;
  }

  .block {
    display: inline-block;
    margin: 0 105px 0 0;
  }
}
</style>